<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
	<div class="container-fluid">
		<div class="card">
			<div class="card-body">
				<div id="toolbar" style="width: 75vw;">
					<form role="form" onsubmit="javascript:return false;">
						<div class="row">
							<div class="col-md-3">
								<div class="row">
									<label class="col-md-3 col-form-label" for="username">用户名</label>
									<div class="col-md-9">
										<input type="text" class="form-control" name="username" />
									</div>
								</div>
							</div>
							<div class="col-md-3">
								<div class="row">
									<label class="col-md-3 col-form-label" for="operation">操作功能</label>
									<div class="col-md-9">
										<input type="text" class="form-control" name="operation" />
									</div>
								</div>
							</div>
							<div class="col-md-5">
								<div class="row">
									<label class="col-md-2 col-form-label ps-4">时间范围</label>
									<div class="col-md-10 ">
										<div class="input-group time-daterange">
											<input type="text" class="form-control" name="startTime" />
											<span class="input-group-text">至</span>
											<input type="text" class="form-control" name="endTime" />
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row my-3">
							<div class="col-md-3">
								<div class="row">
									<label class="col-md-3 col-form-label" for="status">结果</label>
									<div class="col-md-9">
										<select class="form-control" name="status">
											<option value="">全部</option>
											<option value="0">成功</option>
											<option value="1">失败</option>
											<option value="2">异常</option>
										</select>
									</div>
								</div>
							</div>
							<div class="col-md-3">
								<button class="btn btn-primary" data-toggle="tableSearch">搜索</button>
								<button type="reset" class="btn btn-default ms-1">重置</button>
							</div>
						</div>
					</form>
					<div class="mt-2">
						<button class="btn btn-danger me-1" data-handle="clear" data-perm="log/clear" hidden><i class="mdi mdi-brush-variant"></i>
							清空</button>
					</div>
				</div>
				<table id="table"></table>
			</div>
		</div>
	</div>
	<script id="dialog" type="text/html">
		<div id="dialogContent" style="padding:10px;">
			<div class="row">
				<div class="col-md-2 title">操作人</div>
				<div class="col-md-4 content">{{username }}</div>
				<div class="col-md-2 title">IP地址</div>
				<div class="col-md-4 content">{{ip }}</div>
			</div>
			<div class="row">
				<div class="col-md-2 title">操作模块</div>
				<div class="col-md-4 content">{{module }}</div>
				<div class="col-md-2 title">操作功能</div>
				<div class="col-md-4 content">{{operation }}</div>
			</div>
			<div class="row">
				<div class="col-md-2 title">操作时间</div>
				<div class="col-md-4 content">{{createtime }}</div>
				<div class="col-md-2 title">请求耗时</div>
				<div class="col-md-4 content">{{waste }}ms</div>
			</div>
			<div class="row">
				<div class="col-md-2 title">请求方式</div>
				<div class="col-md-4 content">{{style }}</div>
				<div class="col-md-2 title">请求状态</div>
				<div class="col-md-4 content">
					{{ if(status == '0')}}
						<span class="badge text-bg-success">成功</span>'
					{{else  if(status == '1') }}
						<span class="badge text-bg-warning">失败</span>
					{{else if(status == '2') }}
						<span class="badge text-bg-danger">异常</span>
					{{/if }}
				</div>
			</div>
			<div class="row">
				<div class="col-md-2 title">操作地址</div>
				<div class="col-md-10 content">{{url }}</div>
			</div>
			<div class="row">
				<div class="col-md-2 title">调用方法</div>
				<div class="col-md-10 content">{{method }}</div>
			</div>
			<div class="row">
				<div class="col-md-2 title">请求参数</div>
				<div class="col-md-10 content">{{param }}</div>
			</div>
			<div class="row">
				<div class="col-md-2 title">负载参数</div>
				<div class="col-md-10 content">{{body }}</div>
			</div>
			<div class="row">
				<div class="col-md-2 title">返回结果</div>
				<div class="col-md-10 content">{{result }}</div>
			</div>
		</div>
	</script>
	<script type="module">
		import admin from "/admin/js/admin.js"
		var layer = admin.getModule("layer");
		var request = admin.getModule("request");
		var table = admin.getModule("table");

		var dialogHtml = $("#dialog").html();
		var tableInst = table.initTable({
			elem: "#table",
			url: 'log/search',// 请求地址
			showColumns: true, //显示所有列
			sortable: true,
			sortName: "createtime",
			sortOrder: 'desc',
			columns: [{
				field: 'username',
				align: 'center',
				title: '用户名',
			}, {
				field: 'module',
				align: 'center',
				title: '操作模块',
			}, {
				field: 'operation',
				// 是否可视(默认 - true)
				align: 'center',
				title: '操作功能'
			}, {
				field: 'url',
				// 是否可视(默认 - true)
				align: 'center',
				title: '请求路径'
			}, {
				field: 'style',
				// 是否可视(默认 - true)
				align: 'center',
				title: '请求方式'
			}, {
				field: 'status',
				align: 'center',
				title: '结果',
				formatter: statusFormatter,
			}, {
				field: 'createtime',
				align: 'center',
				title: '创建时间',
				sortable: true,
				order: 'desc'
			}, {
				title: '操作',
				formatter: btnGroup,  // 自定义方法
				events: {
					'click .view-btn': view,
				}
			}]
		})
		$('[data-handle="clear"]').click(function () {
			clear();
		})
		initTimeRange();

		function view(e, value, row, index) {
			const dialogHtml = template('dialog', row);
			layer.drawer("详情",dialogHtml,'start','lg');
			//layer.dialog("详情", dialogHtml, 'lg');
		}

		function statusFormatter(value) {
			switch (value) {
				case "0":
					return ' <span class="badge text-bg-success">成功</span>';
				case "1":
					return ' <span class="badge text-bg-warning">失败</span>';
				case "2":
					return ' <span class="badge text-bg-danger">异常</span>';
				default:
					return "";
			}
		}

		// 自定义操作按钮
		function btnGroup() {
			let html =
				'<a href="#!" class="btn btn-sm btn-default me-1 view-btn"  title="详情"><i class="mdi mdi-text-box-outline"></i></a>'
			return html;
		}

		function initTimeRange() {
			const conf = {
				display: {
					components: {
						seconds: true,
					},
					buttons: {
						today: true,
						clear: true,
					},
				},
				localization: {
					hourCycle: 'h23',
					dateFormats: {
						LTS: 'HH:mm:ss',
						LT: 'HH:mm',
						L: 'yyyy-MM-dd',
						LL: 'yyyy-MM-dd',
						LLL: 'yyyy-MM-dd HH:mm',
						LLLL: 'yyyy-MM-dd HH:mm:ss'
					},
					format: 'yyyy-MM-dd HH:mm:ss'
				}
			}
			var startTem = new tempusDominus.TempusDominus(document.querySelector("#toolbar input[name='startTime']"), conf)
			var endTem = new tempusDominus.TempusDominus(document.querySelector("#toolbar input[name='endTime']"), conf)
		}

		function clear() {
			layer.confirm("确认清空日志", function () {
				request.postAlert("log/clear", {}).then(res => {
					tableInst.bootstrapTable("refresh");
				})
			})
		}

	</script>
</body>
<style scoped>
	#dialogContent .title {
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
		display: inline-block;
		background: #f7f7f7;
		border-top: 1px solid #e8e8e8;
		border-left: 1px solid #e8e8e8;
	}

	#dialogContent .content {
		height: 40px;
		line-height: 40px;
		padding: 0 3px 0 10px;
		border-top: 1px solid #e8e8e8;
		border-left: 1px solid #e8e8e8;
		border-right: 1px solid #e8e8e8;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
	}
</style>

</html>